<template>
  <div class="productDetailPage">
    <ProHead />
    <DetailSlot
      :productData="productDetailData"
      :skuData="productOption"
      :currentData="currentProductData"
      :similarProducts="similarProducts"
      :evaluateParam="evaluateParam"
      :productNumber="productNumber"
      :priceRules="priceRules"
      @select-sku="selectSku"
      @collect="collect"
      @reload-detail="reloadDetail"
      @set-number="val => { productNumber = val }"
      v-loading="loading.page"
    >
      <!--------------------------------------- 优惠信息部分组件插槽 ------------------------------------------------>
      <template #buyDiscount>
        <div v-if="[1,2,3,4,5,9].includes(currentProductData.activityType)" class="discount commonContainer">
          <img class="bc" :src="bgImgEnum.discountBc" />
          <!-- 秒杀、折扣信息 -->
          <div v-if="[2,3,4,5].includes(currentProductData.activityType)" class="miaosha discountLayout">
            <div class="left">
              <svg-icon
                v-if="[2,4].includes(currentProductData.activityType)"
                style="width: 115px; height: 20px;"
                name="activity-type-miaosha"
              />
              <svg-icon
                v-if="[3,5].includes(currentProductData.activityType)"
                style="width: 115px; height: 20px;"
                name="activity-type-zhekou"
              />
              <div class="numBox">
                <span>限量{{ limitData.total }}件</span>
                <el-progress
                  v-if="limitData.surplusNumber < limitData.total"
                  :color="'#C83732'"
                  :show-text="false"
                  :stroke-width="10"
                  :percentage="(parseInt(limitData.surplusNumber) / parseInt(limitData.total)) * 100"
                />
                <el-progress
                  v-else
                  :color="'#C83732'"
                  :show-text="false"
                  :stroke-width="10"
                  :percentage="100"
                />
              </div>
            </div>
            <div class="right" v-if="!ifEnable">
              <div class="rest">距离结束剩余</div>
              <div class="restTime">
                <span class="time">{{ formatHours(groupActivity.endTime) }}</span>
                <span class="betw">:</span>
                <span class="time">{{ formatMinutes(groupActivity.endTime) }}</span>
                <span class="betw">:</span>
                <span class="time">{{ formatSeconds(groupActivity.endTime) }}</span>
              </div>
            </div>
            <div class="right" v-else>
              <div class="rest">距离开始剩余</div>
              <div class="restTime">
                <span class="time">{{ formatHours(groupActivity.startTime) }}</span>
                <span class="betw">:</span>
                <span class="time">{{ formatMinutes(groupActivity.startTime) }}</span>
                <span class="betw">:</span>
                <span class="time">{{ formatSeconds(groupActivity.startTime) }}</span>
              </div>
            </div>
          </div>
          <!-- 拼团 -->
          <div class="pintuan" v-if="currentProductData.activityType===1">
            <svg-icon style="width: 115px; height: 20px;" name="activity-type-pintuan" />
            <div class="total">{{ limitData.person }}人团</div>
          </div>
          <!-- 会员价 -->
          <div class="vip" v-if="currentProductData.activityType===9">
            <svg-icon style="width: 115px; height: 20px;" name="activity-type-vip" />
          </div>
        </div>
        <div
          class="festival commonContainer"
          v-if="currentProductData.activityType===8"
        >
          <img class="bc" :src="bgImgEnum.festivalBc" />
          <div class="festival_content">
            <span>{{ `${productDetailData.productName || '特惠活动'}` }}</span>
            <span v-if="productDetailData.sceneFreeShipping === 1">包邮</span>
            <span v-if="productDetailData.sceneDiscount">{{ `${productDetailData.sceneDiscount}` }}折优惠</span>
          </div>
        </div>
      </template>
      <!---------------------------------------- 按钮组件插槽 ------------------------------------------------------------>
      <template #buyBtn>
        <!-- 已下架 -->
        <div class="btns" v-if="!productDetailData.shelveState">
          <button disabled class="btncom">已下架</button>
        </div>
        <!-- 通用购买 -->
        <div class="btns" v-else-if="currentProductData.activityType===0 && currentProductData.stockNumber!==0">
          <button class="btncom addCart" @click="clickAddCart">加入购物车</button>
          <button class="btncom buy" @click="buyGood">立即购买</button>
        </div>
        <!-- 团购 -->
        <div class="btns" v-else-if="currentProductData.activityType === 1 && currentProductData.stockNumber !== 0">
          <button class="btncom addCart" @click="openGroup(1)" v-if="!ifEnable">我要开团</button>
          <button class="btncom" v-else>未开始</button>
          <button class="btncom buy" @click="buyGood(2)">单独购买</button>
        </div>
        <!-- 秒杀、折扣、场景营销、会员价 -->
        <div class="btns" v-else-if="currentProductData.activityType in [2,3,4,5,8,9] && currentProductData.stockNumber!==0">
          <button class="btncom addCart" @click="clickAddCart">加入购物车</button>
          <button class="btncom buy" @click="buyGood">立即购买</button>
        </div>
        <!-- 组合销售 -->
        <div class="btns" v-else-if="currentProductData.activityType === 6">
          <button class="btncom" @click="clickAddCart">组合销售加入购物车</button>
        </div>
        <!-- 会员价 -->
        <div class="btns" v-else-if="currentProductData.activityType === 9">
          <button class="btncom addCart" @click="clickAddCart">加入购物车</button>
          <button class="btncom buy" @click="buyGood">立即购买</button>
        </div>
        <!-- 场景营销 -->
        <div class="btns" v-else-if="currentProductData.activityType === 8">
          <button class="btncom addCart" @click="clickAddCart">加入购物车</button>
          <button class="btncom buy" @click="buyGood">立即购买</button>
        </div>
        <!-- 无库存 -->
        <div class="btns" v-else-if="currentProductData.stockNumber===0 && productDetailData.shelveState">
          <button class="btncom" disabled>已售空</button>
        </div>
        <div class="btns" v-else>
          <button class="btncom" disabled>该规格暂不参与活动</button>
        </div>
      </template>
      <!---------------------------------------- 营销活动额外内容插槽 ------------------------------------------------------------------->
      <template #extra>
        <!-- 组合套餐 -->
        <div class="combition" v-if="composeList.length > 0">
          <div class="title">组合套餐</div>
          <img class="bc" :src="bgImgEnum.extraBc" />
          <el-tabs v-model="tabs.activeTable" type="card">
            <el-tab-pane
              v-for="(item, index) in composeList"
              :key="item.composeId"
              :label="item.composeName"
              :name="index.toString()"
            >
              <div class="toleft composeBtns" @click="composeMove('left')">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div class="contentLeft">
                <div
                  class="list"
                  ref="composeList"
                  :style="`left:${composePosition}px`"
                >
                  <div
                    class="item"
                    ref="composeItemRef"
                    v-for="(i, idx) in item.composeProductInfoList"
                    :key="i.productId"
                  >
                    <svg-icon v-if="idx !== 0" style="margin: 0 40px; color: #CCC;" name="detail-+++" />
                    <ComposeProduct
                      :productData="i"
                      :index="idx"
                      @getsku="getTheSku"
                      @jump="jumpDetail"
                    />
                  </div>
                </div>
              </div>
              <div class="toleft composeBtns" @click="composeMove('right')">
                <i class="el-icon-arrow-right"></i>
              </div>
              <svg-icon style="margin: 0 40px; color: #CCC;" name="detail-===" />
              <div class="buyPro">
                <div class="sum">活动共{{ item.composeProductInfoList.length }}件商品</div>
                <div class="price">
                  <svg-icon style="width: 75px; height: 18px;" name="compose-price" />
                  <span>{{ composePrice }}</span>
                </div>
                <div class="lights">
                  <div class="btn" @click="buyCompose">立即购买</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 拼团 -->
        <div
          class="pinList"
          v-if="currentProductData.activityType === 1
            && productDetailData.collageOrders.length
            && ifEnable === 0"
        >
          <div class="fightOrderTit">
            <span>这些人正在拼单</span>
          </div>
          <div class="pinListBox">
            <div
              class="pinItem"
              v-for="item in productDetailData.collageOrders"
              :key="item.collageId"
            >
              <div class="Avatar">
                <img :src="item.headImage" alt="" />
              </div>
              <div class="pinUserInfo">
                <span class="pUserName">{{ item.name }}</span>
                <div class="rest">
                  <span class="notBad">还差<b>{{ item.person }}</b>人拼成</span>
                  <span class="remainingTime">剩余：<b>{{ formatTime(item.time) }}</b></span>
                </div>
              </div>
              <div v-if="!item.lock" class="pinBtn" @click="goToGroupBuy(item.collageId)">和Ta拼</div>
              <div v-else class="pinBtn">已结束</div>
            </div>
          </div>
        </div>
      </template>
    </DetailSlot>
    <el-dialog
      title="提示"
      v-model="visible.buyGroup"
      width="30%"
      :before-close="groupBuyClose"
    >
      <span>是否跟他拼团？</span>
      <template #footer>
        <el-button
          @click="groupBuyClose"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="openGroup(0)"
        >确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, reactive, ref, shallowRef, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import Cookie from 'js-cookie'

import { useUser } from '@/store/user'
import { useCart } from '@/store/cart'
import { useShop } from '@/store/shop'
import ProHead from '@/views/product/productHead.vue'
import DetailSlot from '@/views/product/productDetailSlot.vue'
import ComposeProduct from '@/views/product/components/composeProduct.vue'

import {
  addToCart,
  getCartList
} from '@/api/user/cart.js'
import {
  getShopIndex
} from '@/api/shop.js'
import {
  postCollect,
  cancelCollect
} from '@/api/user/user.js'
import {
  // getProducts,
  getProductsById,
  getComposePro
} from '@/api/product.js'

import {
  getBindList
} from '@/api/Activity/ActivityBind.js'
import { formatHours, formatMinutes, formatSeconds } from './filters'
import SvgIcon from '@/components/svgIcon/index.vue';
import discountBc from '/static/image/activity/discount-bc.webp'
import festivalBc from '/static/image/activity/festival-bc.webp'
import extraBc from '/static/image/activity/extraBc.webp'

let bgImgEnum = {
  discountBc,
  festivalBc,
  extraBc
}
defineComponent({
  name: 'ProductDetail'
})
const userStore = useUser()
const cartStore = useCart()
const shopStore = useShop()
const router = useRouter();
let loading = reactive({
  page: false,
});
let visible = reactive({
  buyGroup: false,
})
let tabs = reactive({
  activeTable: '',
});
let productDetailData = ref({});
let evaluateParam = reactive({});
let similarProducts = ref([]);
let currentProductData = reactive({
  stockNumber: 1,
  price: 0,
  originalPrice: 0,
  skuId: null,
  activityType: null,
})
/** 购买商品数量 */
let productNumber = shallowRef(1);

let ifEnable = shallowRef(null);
/**
 * 拼团活动相关内容
 * @property {string} collageId 拼团id
 * @property {string} ifEnable
 * @property {number} startTime 预热开始倒计时
 * @property {number} endTime 拼团活动结束倒计时
 */
let groupActivity = reactive({
  collageId: null,
  ifEnable: null,
  startTime: 0,
  endTime: 0
})
let timer = reactive({
  activity: null,
  group: null,
});

let currentPro = ref({});
// 活动限制数据
let limitData = reactive({});
let skuMap = ref(null);
let skuNames = ref([]);
let productOption = ref({});
let composeList = ref([]);
let skusList = ref([]);
let priceRules = ref([]);

let composePosition = shallowRef(0);

let composePrice = computed(() => {
  const choosed = skusList.value.filter(r => r)
  if (composeList.value[tabs.activeTable].composeProductInfoList.length !== choosed.length) {
    return `请选择规格`
  }
  let price, total
  switch (composeList.value[tabs.activeTable].composeType) {
  // 1直接定价
  case 1:
    price = composeList.value[tabs.activeTable].promote.toFixed(2)
    break
    // 2固定减价
  case 2:
    total = 0
    skusList.value.forEach(item => {
      total += parseFloat(item.price)
    })
    price = (total - composeList.value[tabs.activeTable].promote).toFixed(2)
    break
    // 3折扣
  case 3:
    total = 0
    skusList.value.forEach(item => {
      total += parseFloat(item.price)
    })
    price = (total * composeList.value[tabs.activeTable].promote).toFixed(2)
    break
  default:
    return 0
  }
  return `￥${price}`
})

// 活动倒计时
function countDown () {
  clearInterval(timer.activity)
  timer.activity = setInterval(() => {
    if (groupActivity.endTime > 1000) {
      groupActivity.endTime -= 1000
    } else {
      if (currentProductData.activityType > 0) {
        groupActivity.endTime = 0
        clearInterval(timer.activity)
        alert('活动已结束')
        window.location.reload()
      }
    }
  }, 1000)
}
// 预热倒计时
function startCountDown () {
  clearInterval(timer.group)
  timer.activity = setInterval(() => {
    if (groupActivity.startTime > 1000) {
      groupActivity.startTime -= 1000
    } else {
      if (currentProductData.activityType > 0) {
        groupActivity.startTime = 0
        clearInterval(timer.group)
        // window.location.reload()
      }
    }
  }, 1000)
}
// 拼团倒计时
function groupTimeCountDown () {
  clearInterval(timer.group)
  timer.group = setInterval(() => {
    productDetailData.value.collageOrders.map(item => {
      if (item.time > 1000) {
        item.time -= 1000
      } else {
        item.lock = true
        item.time = 0
      }
    })
  }, 1000)
}
// 获取店铺信息
function getShopHomePageInfo () {
  getShopIndex({ shopId: currentPro.value.shopId }).then(response => {
    const res = response.data
    if (res.code === '200') {
      shopStore.setCollectData({
        ifCollect: res.data.ifCollect,
        collectId: res.data.collectId,
        shopAdress: res.data.shopAdress,
        shopName: res.data.shopName,
        shopId: res.data.shopId,
        classifyNumber: res.data.classifyNumber,
        number: res.data.number,
        shopLogo: res.data.shopLogo
      })
    }
  })
}
// 获取商品详情
function getProductInfo () {
  loading.page = true
  getProductsById({
    shopId: currentPro.value.shopId,
    productId: currentPro.value.productId,
    skuId: currentPro.value.skuId,
    terminal: '3',
    system: '3',
    city: ''
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      productDetailData.value = res.data
      evaluateParam.productId = res.data.productId
      evaluateParam.words = res.data.words
      // this.evaluateParam.words = res.data.comments
      similarProducts.value = res.data.similarProducts
      // 
      limitData.sales = res.data.number
      limitData.person = res.data.person
      limitData.surplusNumber = res.data.surplusNumber
      limitData.total = res.data.total
      if (res.data.priceId) { // 定价捆绑规则查询
        getRules(res.data.priceId)
      }
      skuMap.value = res.data.map
      skuNames.value = res.data.names
      // getProducts操作
      if (!res.data.names.length) {
        ElMessage.error(res.message || '请求失败！')
      } else {
        let sku = []
        let onlyOne = true
        for (var key in skuMap.value) {
          if (skuMap.value[key].skuId === currentPro.value.skuId) {
            setCurrentProductData(skuMap.value[key])
            sku = key.split(',')
            onlyOne = false
          }
        }
        if (onlyOne) {
          setCurrentProductData(skuMap.value['attr_code_0_value_0'])
          sku = ['attr_code_0_value_0']
        }
        // 设置规格选中状态
        skuNames.value.forEach(skuName => {
          skuName.values.forEach(value => {
            if (sku.indexOf(value.valueCode) !== -1) {
              value.selected = true
            }
          })
        })
      }
      setActivityOption()
      // getProOption()
      if (productDetailData.value.collageOrders.length) {
        groupTimeCountDown()
      }
      window.scrollTo(0, 0)
    }
  }).finally(() => {
    loading.page = false
  })
}
function setCurrentProductData (data) {
  currentProductData.stockNumber = data.stockNumber
  currentProductData.price = data.price
  currentProductData.originalPrice = data.originalPrice
  currentProductData.skuId = data.skuId
  currentProductData.activityType = data.activityType
}
// 查询组合捆绑商品
function getComposeData () {
  getComposePro({
    shopId: currentPro.value.shopId,
    productId: currentPro.value.productId,
    skuId: currentPro.value.skuId,
    terminal: '3',
    system: '3'
  }).then(response => {
    const res = response.data
    /**
       * composeType 1直接定价 2固定减价 3折扣
       * promote 元/折扣
       */
    composeList.value = res.data
  })
}
// 查询定价捆绑
function getRules (priceId) {
  getBindList({
    priceId,
    shopId: currentPro.value.shopId
  }).then(response => {
    const res = response.data
    priceRules.value = res.data
  })
}
function reloadDetail () {
  setTimeout(() => {
    router.go(0)
  }, 50);
}
// 获取商品规格信息
// async getProOption () {
//   const response = await getProducts({
//     shopId: currentPro.value.shopId,
//     productId: currentPro.value.productId
//   })
//   const res = response.data
//   if (res.code === '200') {
//     productOption.value = res.data
//     groupActivity.ifEnable = res.data.skuTool.ifEnable
//     let nowTime = Date.now()
//     groupActivity.endTime = new Date(res.data.skuTool.endTime).getTime() - nowTime
//     this.productSizeData = res.data.names[0]
//     if (groupActivity.endTime > 1000) {
//       this.countDown()
//     }
//   } else {
//     this.$message(res.message)
//   }
// }
// 设置活动相关信息
function setActivityOption () {
  /*
      groupActivity.ifEnable = res.data.skuTool.ifEnable
      let nowTime = Date.now()
      groupActivity.endTime = new Date(res.data.skuTool.endTime).getTime() - nowTime
      this.productSizeData = res.data.names[0]
      if (groupActivity.endTime > 1000) {
        this.countDown()
      } */
  for (var i in skuMap.value) {
    if (skuMap.value[i].skuId === currentPro.value.skuId) {
      productOption.value = skuMap.value[i]
      groupActivity.ifEnable = skuMap.value[i].ifEnable
      let nowTime = Date.now()
      groupActivity.endTime = new Date(skuMap.value[i].endTime).getTime() - nowTime
      groupActivity.startTime = new Date(skuMap.value[i].startTime).getTime() - nowTime
      // this.productSizeData = this.skuNames[0]
      if (productOption.value.activityType > 0 && groupActivity.endTime > 1000 && !groupActivity.ifEnable) {
        countDown()
      } else {
        startCountDown()
      }
      break
    }
  }
}
// 加入购物车
function clickAddCart () {
  if (currentProductData.stockNumber > 0) {
    addToCart({
      skuId: currentProductData.skuId,
      number: productNumber.value
    }).then(response => {

      const res = response.data
      if (res.code === '200') {
        ElMessage.success('添加成功')
        getTrolleyList()
      }
    }).catch(err => ElMessage.error(err.message))
  } else {
    ElMessage.warning('商品库存不足')
  }
}
// 购物车列表
function getTrolleyList () {
  getCartList().then(response => {
    const res = response.data
    let cartNumber = 0
    if (res.data.length) {
      cartStore.setShoppingCart(res.data)
      res.data.forEach(j => {
        cartNumber = cartNumber + j.skus.length
      })
    }
    cartStore.setCartNumber(cartNumber)
  })
}
// 购买
function buyGood (type) {
  if (!currentProductData.stockNumber) {
    return ElMessage.warning('商品库存不足')
  }
  if (!Cookie.get('token')) {
    ElMessage.warning('请先登录')
    // 登录弹框
    userStore.setIsLogin(false)
    userStore.setShowLogin()
  } else {
    let shopsData = [
      {
        shopId: productDetailData.value.shopId,
        skus: [
          {
            // skuId: skuId || this.getSkuId(),
            skuId: currentProductData.skuId,
            number: productNumber.value || 1
          }
        ]
      }
    ]
    let paramsType = null
    if (currentProductData.activityType === 0 || (currentProductData.activityType !== 0 && groupActivity.ifEnable === 1)) {
      paramsType = 0
    } else {
      if (type && type === 2) {
        paramsType = 0
      } else {
        paramsType = currentProductData.activityType
      }
    }
    router.push({
      path: '/placeOrder',
      query: {
        type: 1,
        ifWork: 0,
        shops: JSON.stringify(shopsData),
        activityType: paramsType
      }})
  }
}
function jumpDetail (query) {
  currentPro.value.productId = query.productId
  currentPro.value.skuId = query.skuId
  getProductInfo()
  getComposeData()
}
// 获取组合捆绑skuId
function getTheSku (query) {
  const sku = {
    number: 1,
    price: query.item.price,
    skuId: query.item.skuId
  }
  // skusList.value[query.index] = sku
  if (skusList.value.length !== composeList.value[tabs.activeTable].composeProductInfoList.length) {
    skusList.value = new Array(composeList.value[tabs.activeTable].composeProductInfoList.length)
  }
  skusList.value.splice(query.index, 1, sku)
}
// 组合捆绑购买
function buyCompose () {
  if (!Cookie.get('token')) {
    ElMessage.warning('请先登录')
    // 登录弹框
    userStore.setIsLogin(false)
    userStore.setShowLogin()
    return
  }
  if (composeList.value[tabs.activeTable].composeProductInfoList.length !== skusList.value.length) {
    return ElMessage.error('请选择组合商品规格')
  }
  const shops = [{
    shopId: currentPro.value.shopId,
    composeId: composeList.value[tabs.activeTable].composeId,
    skus: skusList.value
  }]
  router.push({
    name: 'placeOrder',
    query: {
      type: 1,
      shops: JSON.stringify(shops),
      ifWork: 0,
      activityType: 7
    }
  })
}
// 拼团
function openGroup (x) {
  if (!currentProductData.stockNumber) {
    return ElMessage.warning('商品库存不足')
  }
  if (!Cookie.get('token')) {
    ElMessage.warning('请先登录')
    // 登录弹框
    userStore.setIsLogin(false)
    userStore.setShowLogin()
    return
  } else {
    // if (productOption.value.names.length === 0) {
    //   var skuId = productOption.value.names[0].skuId
    // }
    const o = productOption.value
    let worksData = {
      shopId: o.shopId,
      number: productNumber.value,
      // skuId: skuId || this.getSkuId(),
      skuId: currentProductData.skuId,
      productId: productDetailData.value.productId,
      type: x ? 1 : 2
    }
    if (x) {
      worksData.shopGroupWorkId = productOption.value.shopGroupWorkId
    } else {
      worksData.shopGroupWorkId = productOption.value.shopGroupWorkId
      worksData.collageId = groupActivity.collageId
    }
    router.push({
      path: '/placeOrder',
      query: {
        works: JSON.stringify(worksData),
        activityType: currentProductData.activityType
      }})
  }
}
// 选择规格sku
function selectSku (o, list) {
  const temp = productDetailData.value.names
  productNumber.value = 1
  if (list.values.length > 1) {
    temp.forEach(tempItem => {
      if (tempItem.nameCode === list.nameCode) {
        tempItem.values.forEach(tempVal => {
          tempVal.selected = tempVal.valueCode === o.valueCode
        })
      }
    })
  }
  let selectOption = []
  temp.forEach(j => {
    j.values.forEach(k => {
      if (k.selected) {
        selectOption.push(k.valueCode)
      }
    })
  })
  let select = selectOption.toString()
  for (let key in skuMap.value) {
    if (key === select) {
      currentProductData = skuMap.value[key]
      productOption.value = skuMap.value[key]
      groupActivity.ifEnable = skuMap.value[key].ifEnable
      let nowTime = Date.now()
      groupActivity.endTime = new Date(skuMap.value[key].endTime).getTime() - nowTime
      groupActivity.startTime = new Date(skuMap.value[key].startTime).getTime() - nowTime
      // this.productSizeData = this.skuNames[0]
      if (productOption.value.activityType > 0 && groupActivity.endTime > 1000 && !groupActivity.ifEnable) {
        countDown()
      } else {
        startCountDown()
      }
      break
    }
  }
}
// 获取skuId
// function getSkuId () {
//   const temp = productOption.value
//   let id = ''
//   temp.names.forEach(j => {
//     j.values.forEach(k => {
//       if (k.selected) id = ((id && `${id},`) || '') + k.valueCode
//     })
//   })
//   return temp.map[id].skuId
// }
// 拼团确认
function goToGroupBuy (id) {
  groupActivity.collageId = id
  visible.buyGroup = true
}
// 取消拼团
function groupBuyClose () {
  groupActivity.collageId = null
  visible.buyGroup = false
}
// // 轮播图
// function thumbsClick (index) {
//   this.swiperThumbs.slideTo(index, 300, false)
//   this.swiperTop.slideTo(index, 300, false)
// }
// 收藏
function collect () {
  if (productDetailData.value.ifCollect === 0) {
    collectItem()
  } else {
    unCollect()
  }
}
// 收藏商品、店铺
function collectItem () {
  postCollect({ productId: productDetailData.value.productId }).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('收藏成功')
      productDetailData.value.ifCollect = 1
    }
  })
}
// 取消收藏
function unCollect () {
  cancelCollect({ ids: [productDetailData.value.collectId] }).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('取消成功')
      productDetailData.value.ifCollect = 0
    }
  })
}
const composeItemRef = ref();
// 移动组合捆绑内容
function composeMove (direction) {
  const long = composeItemRef.value.length * 180 + (composeItemRef.value.length - 1) * (16 + 40 * 2)
  const visual = long - 750
  let num = 0
  if (direction === 'left') {
    if (composePosition.value >= 0) { return }
    let timer = setInterval(() => {
      num += 10
      if (num >= 151) {
        clearTimeout(timer)
        return
      }
      // 移动商品
      composePosition.value += 10
    }, 1)
  }
  if (direction === 'right') {
    if (composePosition.value <= -visual) { return }
    let timer = setInterval(() => {
      num += 10
      if (num >= 151) {
        clearTimeout(timer)
        return
      }
      // 移动商品
      composePosition.value = composePosition.value < -visual ? -visual : composePosition.value - 10
    }, 1)
  }
}
watch(
  () => tabs.activeTable,
  (_nVal, _oVal) => {
    skusList.value = []
  }
)
onBeforeMount(() => {
  currentPro.value = JSON.parse(router.currentRoute.value.query.proData)
  getShopHomePageInfo()
  getProductInfo()
  getComposeData()
})

//   unmounted () {
//     clearInterval(timer.activity)
//     clearInterval(timer.group)
//   },
</script>

<style lang="scss" scoped>
$lightGlod: #FFEBC4;
.productDetailPage{
  background-color: #F5F5F5;
  :deep(.commonContainer){
    margin: 15px 0;
    position: relative;
    .bc{
      width: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  :deep(.discount){
    .discountLayout{
      width: 90%;
      height: 50px;
      padding: 0 22px;
      position: absolute;
      top: 18px;
      display: flex;
      justify-content: space-between;
      font-family: Microsoft YaHei;
      .left{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .svg-icon{
          margin-left: -15px;
        }
        .numBox{
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          span{
            color: $lightGlod;
          }
          .el-progress{
            display: inline-block;
            width: 190px;
            margin: 0 10px;
            .el-progress-bar__outer,.el-progress-bar__inner{
              border-radius: 0;
            }
          }
        }
      }
      .right{
        width: 120px;
        height: 50px;
        .rest{
          font-size: 12px;
          color: $lightGlod;
          text-align: center;
        }
        .restTime{
          margin-top: 10px;
          font-size: 12px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .time{
            padding: 5px;
            color: $lightGlod;
            background-color: #999;
          }
          .betw{
            color: #999;
            font-size: 24px;
            padding-bottom: 5px;
          }
        }
      }
    }
    .pintuan{
      width: 100%;
      position: absolute;
      top: 25px;
      padding: 0 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .total{
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #FFF;
        background-color: #C83732;
        border: 1px solid rgba(0, 0, 0, 0);
      }
    }
    .vip{
      width: 100%;
      position: absolute;
      top: 35px;
      margin-left: 20px;
    }
  }
  :deep(.festival){
    $festival_height: 50px;
    $content_margin_top_bottom: 10px;
    height: $festival_height;
    .bc{
      height: $festival_height;
    }
    .festival_content{
      position: absolute;
      top: 0;
      margin: $content_margin_top_bottom 18px;
      padding: 0 15px 0 8px;
      line-height: $festival_height - ($content_margin_top_bottom * 2);
      color: #C83732;
      background-color: #FFD4D8;
      border-radius: 8px 30px 30px 0px;
    }
  }
  .btns{
    margin-top: 40px;
    .btncom{
      width: 100%;
      height: 50px;
      padding: 0;
      cursor: pointer;
      border: 1px solid #333333;
    }
    .addCart{
      color: $mainGlod;
      background: #333333;
    }
    .buy{
      margin-top: 15px;
      background-color: #FFFFFF;
      border: 1px solid #333333;
    }
  }
  .combition{
    max-width: 1250px;
    background-color: #FFFFFF;
    margin: 10px 0;
    font-family: Microsoft YaHei;
    padding: 15px 20px;
    position: relative;
    .title{
      padding-bottom: 15px;
      font-size: 18px;
      color: #333333;
      border-bottom: 1px solid #F3F4F5;
    }
    .bc{
      margin-top: 60px;
      width: 100%;
    }
    :deep(.el-tabs){
      position: absolute;
      top: 60px;
      .el-tabs__header{
        border: none;
      }
      .el-tabs__nav{
        width: 100%;
        max-width: 1210px;
        border: none;
        border-radius: 0;
        overflow-x: auto;
        &::-webkit-scrollbar {
          height: 8px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
          background-color: #e3e3e3;
        }
        .el-tabs__item{
          // min-width: 100px;
          height: 40px;
          line-height: 40px;
          margin-right: 8px;
          padding: 0 18px;
          text-align: center;
          font-size: 14px;
          color: #333;
          background-color: #F5F5F5;
          border: none;
        }
        .is-active{
          color: #FFF;
          background-color: $mainGlod;
        }
      }
      .el-tab-pane{
        width: 1210px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .contentLeft{
      max-width: 750px;
      overflow: hidden;
      display: flex;
      .list{
        display: flex;
        justify-content: space-around;
        position: relative;
        .item{
          display: inline-flex;
          align-items: center;
        }
      }
    }
    .composeBtns{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #FFF;
      cursor: pointer;
    }
    .buyPro{
      .sum{
        text-align: center;
        color: $lightGlod;
        font-weight: bold;
      }
      .price{
        margin: 20px 0 30px;
        text-align: center;
        color: $lightGlod;
        font-weight: bold;
        span{
          font-size: 18px;
        }
      }
      .btn{
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #333333;
        background: linear-gradient(272deg, $lightGlod 0%, $mainGlod 100%);
        cursor: pointer;
      }
      .lights{
        position: relative;
        overflow: hidden;
        cursor: pointer;
      }
      .lights:before {
        content:"";
        position: absolute;
        left: -10px; /**第一个数字参数控制扫光速度，数字越大越慢**/
        top: 10px;
        width: 200px;
        height: 8px; /**光标的宽度，可根据实际调整**/
        background-color: rgba(255, 255 ,255,.5);
        transform: rotate(-45deg);
        animation: scanLights 2s linear 1s infinite alternate;/**第一个数字参数控制扫光速度，数字越大越慢**/
      }
      @keyframes scanLights {
        0% { left: -100px; top: 0; }
        to { left: 150px; top: 0px; }
      }
    }
  }
  .pinList{
    width: 100%;
    height: 280px;
    margin-bottom: 30px;
    background-color: #FFF;
    .fightOrderTit{
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      border-bottom: 2px solid #F3F4F5;
    }
    .pinListBox {
      height: 185px;
      padding: 20px 15px;
      overflow-x: auto;
      white-space: nowrap;
      // display: flex;
      .pinItem {
        width: 180px;
        height: 100%;
        margin: 0 60px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        .Avatar {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .pinUserInfo {
          width: 100%;
          span {
            display: block;
            font-size: 14px;
            b {
              font-weight: normal;
              color: #C83732;
            }
          }
          .pUserName{
            margin: 10px 0;
            text-align: center;
          }
          .rest{
            display: flex;
            justify-content: space-between;
          }
        }
        .pinBtn {
          width: 100%;
          height: 40px;
          margin-top: 15px;
          border: 1px solid $mainGlod;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
          font-size: 16px;
          color: $mainGlod;
        }
      }
    }
  }
}
.pinListBox::-webkit-scrollbar {
  height: 8px;
  background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
.pinListBox::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background-color: #FFFFFF;
}
/*定义滑块 内阴影+圆角*/
.pinListBox::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
  background-color: #e3e3e3;
}
</style>
